<style scoped lang="scss">
    ::v-deep {
        .gCode_filed_list {
            padding: 0px;
        }
    }
</style>
<template>
    <div style="padding: 10px;" class="gCode_filed_list">
        <el-form :model="queryParams" ref="queryForm" class="queryForm" :inline="true" v-show="showSearch"
                 @submit.native.prevent>
            <el-form-item label="表格名称" desc="" prop="tableName">
                <el-input v-model.trim="queryParams.tableName" placeholder="" clearable size="small"
                          style="width:120px;" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="表格名称中文" desc="" prop="tableNameChinese">
                <el-input v-model.trim="queryParams.tableNameChinese" placeholder="" clearable size="small"
                          style="width:120px;" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @submit.native.prevent @click="handleQuery">
                    搜索
                </el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5" class="buttonsRow">
                <el-button type="primary" size="small" plain @click="()=>triggerModify()">新增</el-button>
                <el-button type="primary" size="small" plain @click="()=>triggerCreateByDDL()">导入DDL</el-button>
                
                <el-button type="primary" size="small" plain @click="()=>triggerSettnigsTemplateList()">管理模板</el-button>
                
                <el-button type="primary" size="small" plain @click="()=>triggerTypeConversion()">类型转换方法</el-button>
            
            
            </el-col>
            <right-toolbar @layout="(_obj)=>columnsHidden=_obj" :showSearch.sync="showSearch"
                           @queryTable="getInfoList"></right-toolbar>
        </el-row>
        <section class="tablecontainer">
            <el-table border ref="multipleTable" :data="dataList" size="mini" class="tabletop" tooltip-effect="dark"
                      style="width: 100%" @selection-change="rows=>{         selectRows=rows      }"
                      @row-click="row=>{          tableRowClickOnece(row,'multipleTable')      }"
                      @row-dblclick="row=>{
                                 $emit('success',row)
                              }"
                      :row-class-name="tableRowClassName">
                <el-table-column type="selection" width="40" align="center"></el-table-column>
                <el-table-column label="操作" width="55" align="center">
                    <template slot-scope="scope">
                        <el-popover placement="top-start" title="操作" width="333" trigger="hover">
                            <div>
                                <el-button size="mini" type="text"
                                           @click="()=>triggerModify(scope.row)"> 修改
                                </el-button>
                                <el-button size="mini" type="text"
                                           @click="()=>triggerFiledsModify(scope.row)"> 管理字段
                                </el-button>
                                <el-button size="mini" type="text"
                                           @click="()=>troggerGenerateCodeZip(scope.row)">生成模板
                                </el-button>
                                <el-button size="mini" type="text"
                                           @click="()=>openLog(scope.row)">变更日志
                                </el-button>
                                <el-button size="mini" type="text"
                                           @click="()=>handleDelete(scope.row)">删除
                                </el-button>
                            </div>
                            <el-button slot="reference" type="text">操作</el-button>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column v-if="!columnsHidden['tableName']" label="名称" prop="tableName" min-width="120px;">
                    <template slot-scope="scope">
                        <div> {{scope.row.tableName}}</div>
                    </template>
                </el-table-column>
                <el-table-column v-if="!columnsHidden['tableNameChinese']" label="中文" prop="tableNameChinese"
                                 min-width="120px;">
                    <template slot-scope="scope">
                        <div> {{scope.row.tableNameChinese}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="添加时间/人" prop="add_time/add_user" v-if="!columnsHidden['add_time/add_user']">
                    <template slot-scope="scope">
                        <span>{{scope.row.addTime|dateFormatYYYYMMDD}}/{{scope.row.addUser}}</span></template>
                </el-table-column>
                <el-table-column label="更新时间/人" prop="lastEditTime/editUser"
                                 v-if="!columnsHidden['lastEditTime/editUser']">
                    <template slot-scope="scope"><span>{{scope.row.lastEditTime|dateFormatYYYYMMDD}}/{{scope.row.editUser}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination :background="true" style="padding: 20px;" :current-page.sync="queryParams.pageNum"
                           :page-size="queryParams.pageSize" layout="prev, pager, next" :total="total"
                           @size-change="(pageSize)=>{$data.queryParams.pageSize=pageSize;dataList=[];getInfoList();}"
                           @current-change="(pageNum)=>{$data.queryParams.pageNum=pageNum;dataList=[];getInfoList();}"></el-pagination>
        </section>
    </div>
</template>
<script>
  import { formData, formMethod, PageData } from '@/utils/formcommon';
  import { getUrlParam, dateFormatYYYYMMDD } from '@/utils/index';
  import { default as FormDialog } from '@codegenarate/mydialogplus';
  import * as  api from '@/apis/gTable.api.js';
  import { createA } from '@/utils';
  
  const dicInner = {
    '___g_table_id': '',
    'g_table_id': 'g_table_id',
    '___g_table_tableName': '',
    'g_table_tableName': 'g_table_tableName',
    '___g_table_tableNameChinese': '',
    'g_table_tableNameChinese': 'g_table_tableNameChinese',
    '___g_table_delState': '',
    'g_table_delState': 'g_table_delState',
  };
  export default {
    name: 'gTablelist',
    data() {
      return {
        api: api,
        dicInner, ...formData,
        queryParams: {
          name: '',
          searchKey: '',
          'id': '',
          'tableName': '',
          'tableNameChinese': '',
          'delState': '', ...PageData,
        },
        lists: [],
        selectRows: [],
        classId: '',
        classIdPath: '',
        className: '',
        loading: false,
        isFold: false,
        tableRowClassName({ row, rowIndex }) {
          if (row.rowType == 'total') {
            return 'total-row';
          }
          return '';
        },
      };
    },
    components: {
      svgIcon: () => import('@codegenarate/svg-icon'),
      dicSelect: () => import('@/components/dicselect.vue'),
      dicTag: () => import('@/components/DicSelect/dic-tag.vue'),
      RightToolbar: () => import('@/components/RightToolbar/index.vue'),
      modify: () => import('./modify'),
    },
    mounted() {
      if (this.$props['immediate']) {
        this.getInfoList();
      }
    },
    filters: { dateFormatYYYYMMDD: dateFormatYYYYMMDD },
    computed: {},
    watch: {},
    props: {
      immediate: {
        type: [Boolean], default() {
          return true;
        },
      },
      isPage:{
        type: [Boolean]
      }
    },
    methods: {
      ...formMethod,
      /**     * @description:     * @params _data.dataList     * @return     */
      initByDialog(_data) {
        this.getInfoList();
      },
      tableRowClickOnece(row, tableRef, options) {
        var table = this.$refs[tableRef];
        if (options && options.canSelect) {
          var istrue = options.canSelect(row);
          if (!istrue) {
            table && table.toggleRowSelection(row, false);
          }
        }
        table && table.clearSelection();
        table && table.toggleRowSelection(row);
      },
      async triggerFiledsModify(row) {
        var result = await FormDialog({
          width: '888px', title: '设置字段', data() {
            return {
              gTableId: row.id,
            };
          }, components: { modify: () => import('@/views/gCode/filed/list.vue') },
        });
        if (!(result && result.success)) {
          return result;
        }
        this.getInfoList();
      },
      //生成模板
      async troggerGenerateCodeZip(row) {
        var result = await FormDialog({
          width: '888px', title: '生成【'+row.tableName+'】模板',
          closeOnClickModal: false,
           data() {
            return {
              gTableId: row.id,
              gTableName: row.tableName,
              gTableNameChinese: row.tableNameChinese,
            };
          }, components: { modify: () => import('@/views/gCode/templateList.vue') },
        });
        if (!(result && result.success)) {
          return result;
        }
        var data = result.data;
        // region  触发生产代码zip 接口
        var result2 = await api.zipCodeByTemplate(data);
        createA(`http://code.liumingtai.com/${result2&&result2.data}`);
        // endregionq
      },
      
      async triggerSettnigsTemplateList() {
        var self = this;
        var result = await FormDialog({
          width: '888px',
          title: '管理模板',
          data() {
            return {
              classId: self.queryParams.classId,
              className: self.queryParams._className,
            };
          }, components: { modify: () => import('@/views/gCode/template/list.vue') },
        });
      },
      /**
       * @description: 类型转换
       * @params
       * @return
       */
      async triggerTypeConversion() {
        var self = this;
        var result = await FormDialog({
          width: '888px',
          title: '设置转换方法',
          data() {
            return {
              classId: self.queryParams.classId,
              className: self.queryParams._className,
            };
          },
          components: { modify: () => import('@/views/gCode/typeConversion.vue') },
        });
      },
      
      async triggerModify(row) {
        var result = await FormDialog({
          width: '888px', title: row && row.id ? '编辑' : '新增', data() {
            return { ...row };
          }, components: { modify: () => import('./modify.vue') },
        });
        if (!(result && result.success)) {
          return result;
        }
        this.getInfoList();
      },
      /**
       * @description:  ddl导入
       * @params
       * @return
       */
      async triggerCreateByDDL() {
        var result = await FormDialog({
          width: '888px',
          title: '解析ddl',
          closeOnClickModal: false,
          components: {
            //输入ddl  解析得到 tablename fileds
            //一样的tablename  提示修改
            //新增修改
            modify: () => import('@/views/gCode/modifyTableAndFileds.vue'),
          },
        });
      },
    },
  };</script>
